既然這是要上架的系統，還是要好好的優化一下，

所以今天的進度可能就是基本的程式碼調整、重構或版面上的調整

首先是浮動頁面，我們為了要確保後面的資料都正常運作，所以要驗證表單功能
所以載入了dayjs來驗證與產生日期資料

submitSearch() {
    if(
        dayjs().isAfter(dayjs(this.searchForm.rideDate)) && 
        this.searchForm.rideDate != dayjs().format('YYYY-MM-DD')
    ){
        alert('日期必須大於昨日')
        return 
    }
    switch (this.currentPage) {
        case 'time':
            if(!this.searchForm.startStation || !this.searchForm.endStation){
                alert('站點不得為空')
                return 
            }
            this.dataService.searchByTime(this.searchForm)
            break
        case 'station':
            if(!this.searchForm.singleStation){
                alert('站點不得為空')
                return 
            }
            this.dataService.searchByStation(this.searchForm)
            break
        case 'trainno':
            if(!this.searchForm.trainNo){
                alert('列車編號不得為空')
                return 
            }
            this.dataService.searchByTrainNo(this.searchForm)
            break
    }
},
mounted() {
    this.searchForm.rideDate = dayjs().format('YYYY-MM-DD')
}

接著是為了快速搜尋站點而設置的類別

store/train.json

    {
      "id": "7130",
      "name": "蘇澳新",
      "parent": "屏東縣"
    },
    {
      "id": "7190",
      "name": "宜蘭",
      "parent": "宜蘭縣"
    },
    {
      "id": "7360",
      "name": "瑞芳",
      "parent": "新北市"
    }
  ],
  "category":[
    "基隆市","新北市","臺北市","桃園市",
    "新竹市","新竹縣","苗栗縣","台中市",
    "彰化縣","南投縣","雲林縣","嘉義縣",
    "嘉義市","台南市","高雄市","屏東縣",
    "台東縣","花蓮縣","宜蘭縣","成追線",
    "平溪線","深澳線","六家線","內灣線",
    "沙崙線"
  ]

然後調整一下版面以及資料

popup.html

<div class="row" v-show="currentPage === 'time'">
    <label>出發站</label>
    <div class="col">
        <select class="inline" v-model="startCategory">
                <option value="">縣/市(選填)</option>
                <option v-for="(item,index) in category" :value="item">{{item}}</option>
            </select>
        <select class="inline" v-model="searchForm.startStation">
            <option v-for="(item,index) in startTrainList" :key="'train-'+index">{{item.id + '-' + item.name}}</option>
        </select>
    </div>
</div>
<script>
Vue({
    data(){
        return {
            startCategory: '',
            category: [],
            trainList: [],
        }
    }
    computed:{
        startTrainList(){
            if(this.startCategory){
                return this.trainList.filter(item=>item.parent === this.startCategory)
            }
            return this.trainList
        }
    }
})
</script>

結果畫面

其次是後台腳本，因為我們的台鐵搜尋功能，會造成腳本每次開啟網頁時就搜尋，
所以應該要阻止無限次的功能，而我們用最簡單的方法處理

background/bg.js

//TrainManager
    //清除資料
    clearActionData(){
        this.actionData = null
    }
    
    msgListener(request, sender, sendResponse){
        switch(request.func){
            case 'getSearch': 
                sendResponse(trainManager.actionData)
                trainManager.clearActionData()
                break
        }   
    }

然後內容腳本也要防呆

// chrome.runtime.sendMessage callback
function runTrainByTime(res) {
    if(!res){
        return 
    }
}

大功告成，這樣系統就又更人模人樣了，太棒囉！